const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: "url-loader",
                options: {
                    limit: 8 * 1024,
                    esModule: false,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs',
                }
            },
            {
                test: /\.html$/,
                loader: "html-loader",
            },
            {
                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                loader: "file-loader",
                options: {
                    esModule: false,
                    name: '[hash:10].[ext]',
                    outputPath: 'medias',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
    ],
    mode: "development",
    // mode: "production",
    // 开发服务器npx webpack-dev-server 
    devServer: {
        contentBase: resolve(__dirname, "build"),
        compress: true, //gzip压缩
        port: 3000,
        open: true,
    },


}